/**
 * 目标1：默认显示-北京市天气
 *  1.1 获取北京市天气数据
 *  1.2 数据展示到页面
 */
function getWeather(code){
    myAxios({
      url:'http://hmajax.itheima.net/api/weather',
      params:{
        city:code
      }
    })
    .then(res=>{
      console.log(res);
      // 将res.data的数据获取赋值给一个变量，方便后续使用
      const weatherData=res.data
      // 设置城市名称
      document.querySelector('.area').innerHTML=weatherData.area
      // 设置年月日和农历
      document.querySelector('.dateShort').innerHTML=weatherData.dateShort
      document.querySelector('.dateLunar').innerHTML=weatherData.dateLunar
      // 设置温度
      document.querySelector('.temperature').innerHTML=weatherData.temperature
      document.querySelector('.psPm25').innerHTML=weatherData.psPm25
      document.querySelector('.psPm25Level').innerHTML=weatherData.psPm25Level
      // 设置天气 风向 风力
      document.querySelector('.weather').innerHTML=weatherData.weather
      document.querySelector('.windDirection').innerHTML=weatherData.windDirection
      document.querySelector('.windPower').innerHTML=weatherData.windPower
      // 获取今天的天气数据
      const todayWeather=weatherData.todayWeather
      // 先设置天气
      document.querySelector('.today-weather .weather').innerHTML=todayWeather.weather
      // 设置其他内容
      document.querySelector('.humidity').innerHTML=todayWeather.humidity
      document.querySelector('.sunriseTime').innerHTML=todayWeather.sunriseTime
      document.querySelector('.sunsetTime').innerHTML=todayWeather.sunsetTime
      document.querySelector('.temDay').innerHTML=todayWeather.temDay
      document.querySelector('.temNight').innerHTML=todayWeather.temNight
      document.querySelector('.ultraviolet').innerHTML=todayWeather.ultraviolet
      document.querySelector('.week-wrap').innerHTML=weatherData.dayForecast.map(item=>`  <li class="item">
        <div class="date-box">
          <span class="dateFormat">${item.dataFormat}</span>
          <span class="date">${item.data}</span>
        </div>
        <img src="${item.weatherImg}" alt="" class="weatherImg">
        <span class="weather">${item.weather}</span>
        <div class="temp">
          <span class="temDay">${item.temDay}</span>-
          <span class="temNight">${item.temNight}</span>
          <span>℃</span>
        </div>
        <div class="wind">
          <span class="windDirection">${item.windDirection}</span>
          <span class="windPower">${item.windPower}</span>
        </div>
      </li>`).join('')

    })
  }
  getWeather('110110')
  document.querySelector('.search-city').addEventListener('input',_.debounce(function(){
    let city=this.value.trim()
    console.log(city);
    myAxios({
      url:'http://hmajax.itheima.net/api/weather/city',
      params:{
        city
      }
    })
    .then(res=>{
      console.log(res);
      document.querySelector('search-list').style.display='block'
      document.querySelector('.search-list').innerHTML=res.data.map(item=>`<li class="city-item" data-code="${item.code}">${item.name}</li>`).join('')
    })
  }, 400))
document.querySelector('.search-list').addEventListener('click', function (e) {
    if (e.target.tagName === 'LI') {
        // 1、获取城市的code
        let code = e.target.dataset.code
        // 2、调用getWeather发送请求，获取城市天气预报信息，进行渲染
        getWeather(code)
        this.style.display='none'
      }
  })